<template>
  <q-dialog ref="dialog" @hide="onDialogHide">
    <q-card class="q-dialog-plugin">
      <q-card-section>
        <p class="dialog-notice-title"><i class="iconfont icontubiao-28"/>{{title}}</p>
      </q-card-section>
      <div class="q-card__section q-dialog__message scroll" style="padding-left: 40px" v-if="message !== ''">
        {{message}}
      </div>
      <q-form greedy @submit="$emit('onOKClick')" style="padding: 0">
        <div style="padding: 20px 40px">
          <slot/>
        </div>

        <q-card-actions class="form-inline" align="right" style="margin-top: 10px;padding: 8px;">
          <q-btn color="primary" outline label="取消" @click="hide" />
          <q-btn color="primary" label="确认" type="submit" />
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<script>
export default {
  name: 'prompt-dialog',
  props: {
    title: {
      type: String,
      default: ''
    },
    message: {
      type: String,
      default: ''
    }
  },
  methods: {
    // following method is REQUIRED
    // (don't change its name --> "show")
    show () {
      this.$refs.dialog.show()
    },

    // following method is REQUIRED
    // (don't change its name --> "hide")
    hide () {
      this.$refs.dialog.hide()
    },

    onDialogHide () {
      // required to be emitted
      // when QDialog emits "hide" event
      this.$emit('hide')
    }
  }
}
</script>

<style scoped>

</style>
